<script setup lang="ts">
import {ref, inject,  watch } from 'vue'

const { sliceInfo, viewType } = inject('viewerInfo') as any
const ws = inject('pyImgHandlerIo') as any

const currentSliceRef = ref(sliceInfo.value.current)

watch(() => sliceInfo.value.current, (newValue, oldValue) => {
  currentSliceRef.value = newValue
}, {
  immediate: true
})

const handleChange = (val) => {
  const msg = {
    viewType: viewType.value,
    opType: 'scrollTo',
    toIndex: val
  }
  ws.sendMsg(msg)
}


</script>

<template>
  <div class="py-[10px] box-border">
    <el-slider v-model="currentSliceRef"
               @change="handleChange"
               vertical
               height="100%"
               :min="1"
               :max="sliceInfo.total" />
  </div>
</template>

<style scoped>

</style>
